<!DOCTYPE html>
<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

	<title>Markergrafik wechseln</title>
    
    <!-- Stylesheet -->
	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" 
    	  rel="stylesheet" 
          type="text/css" />
         
    <!-- Google Maps API --> 
	<script type="text/javascript" 
            src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    
    <script type="text/javascript">

		// Definieren der Icons
		var customIcons = {
		  massage: {
			icon: 'massage.png',
		  },
		  office: {
			icon: 'office.png'
		  }
		};
	
	  function initialize() {
		var myLatlng = new google.maps.LatLng(52.5234051,13.411399);
		
		// Kartenoptionen
		var myOptions = {
		  zoom: 5,
		  center: myLatlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		}
		
		// Karte initialisieren
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
		// Marker-Icon festlegen
	    var type = "massage";
		var icon = customIcons[type] || {};
		
		// Marker setzen
		var marker = new google.maps.Marker({
			position: myLatlng, 
			map: map,
			icon: icon.icon,
			title:"Hello World!"
		}); 
		
		 // Mouseover
		 google.maps.event.addListener(marker, 'mouseover', function(event) {
					marker.setIcon("office.png");
		 });  
		 
		 // Mouseout
		 google.maps.event.addListener(marker, 'mouseout', function(event) {
			marker.setIcon("massage.png");
		 }); 
		 
		 // Click
		 google.maps.event.addListener(marker, 'click', function(event) {
			alert("Funktion die Ihn löscht");
		 }); 

	  }
</script>

</head>

<body onload="initialize()">

	<!-- Kartendarstellung -->
  	<div id="map_canvas">
    
    </div>
    
</body>

</html>
